<template>
  <div class="bd-table">
    <el-table
      :data="tableData"
      style="width: 100%"
      @cell-click="(row, column, cell, event) => $emit('cell-click', row, column, cell, event)"
      :highlight-current-row="tableHeader.highlight ? tableHeader.highlight : false"
    >
      <el-table-column
        v-if="tableHeader.type"
        :type="tableHeader.type"
        align="center"
        :label="tableHeader.label || ''"
      >
      </el-table-column>
      <el-table-column
        v-for="item in tableHeader.header"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :align="item.align || 'center'"
        :min-width="item.minWidth"
        :width="item.width"
        :show-overflow-tooltip="item.overflowTooltip || false"
      >
        <template slot-scope="scope">
          <span v-if="!item.type">{{ item.filter ? item.filter(scope.row) : scope.row[item.prop]  }}</span>
          <div v-else-if="item.type === 'switch'">
            <el-switch
              v-model="scope.row[item.prop]"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="item.disabled ? item.disabled(scope.row) : false"
              :active-value="item.activeValue ? item.activeValue : true"
              :inactive-value="item.inactiveValue ? item.inactiveValue : false"
              @change="item.handler(scope.row)"
            >
            </el-switch>
          </div>
          <div v-else-if="item.type === 'img'">
            <el-image
              style="width: 60px; height: 60px"
              :src="scope.row[item.prop] | getImgUrl"
              :preview-src-list="item.previewSrcList && item.previewSrcList(scope.row)"
            >
            </el-image>
          </div>
          <div
           v-else-if="item.type === 'video'"
           @click="item.handlerPreview && item.handlerPreview(scope.row)"
          >
            <video
              style="width: 60px; height: 60px"
              :src="scope.row[item.prop] | getImgUrl"
            >
            </video>
          </div>
          <div
           v-else-if="item.type === 'audio'"
          >
            <audio
              :src="scope.row[item.prop] | getImgUrl"
              controls
              ref="audio"
              :title="scope.row[item.prop]"
              @play="play(scope.row[item.prop])"
            >
            </audio>
          </div>
          <div v-else-if="item.type === 'tag'">
            <el-tag
              :type="item.statusType ? item.statusType(scope.row) : 'success'">
              {{ item.filter ? item.filter(scope.row) : scope.row[item.prop]  }}
            </el-tag>
          </div>
          <div v-else-if="item.type === 'button'">
            <bdButton :handlerBtn="item.btn" :scope="scope.row"/>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>

export default {
  name: 'bdTable',
  components: {
  },
  props: {
    tableHeader: {
      type: [Array, Object],
      required: true
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {}
  },
  methods: {
    play (name) {
      const arr = this.$refs.audio
      const filterAudio = arr.filter((item, i) => item.title !== name)
      filterAudio.forEach(item => { item.pause() })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
